<template>
  <div class="auto">
    <validator name='v'>
      <form class="form-horizontal">
      <p class="bg-info text-center" style="padding: 8px;">补气信息</p>
        <div class="row" style="margin-top:10px;">
          <label for="f_lastremain_fillgas" class=" col-sm-2 control-label">上次剩余补气量:</label>
          <div class="col-sm-2">
            <input class="form-control" type="number" v-model="model.f_lastremain_fillgas"
            placeholder="上次剩余补气量"  v-scale = "[model.f_lastremain_fillgas, 2]" disabled>
          </div>
          <label for="f_theremain_fillgas" class=" col-sm-2 control-label">本次剩余补气量:</label>
          <div class="col-sm-2">
            <input class="form-control" type="number" v-model="theremain_fillgas"
            placeholder="本次剩余补气量"  v-scale = "[theremain_fillgas, 2]" disabled>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <div :class="[$v.f_fillgas.dctest ? 'has-error' : 'has-success']">
            <label for="f_fillgas" class=" col-sm-2 control-label" >补气量:</label>
            <div class="col-sm-2">
              <input class="form-control" type="text" v-model="model.f_fillgas"
              v-validate:f_fillgas='{dctest: [model.f_lastremain_fillgas, "<=" ] }'
              placeholder="补气量"  v-scale = "[model.f_fillgas, 2]">
              <span v-if="$v.f_fillgas.dctest" style="color:red ">补气量不能大于上次剩余补气量</span>
            </div>
          </div>
          <label for="f_fillgas_type" class="col-sm-2 control-label">补气类型</label>
          <div class="col-sm-2">
            <v-select id="f_fillgas_type"
            v-model="model.f_fillgas_type"
            placeholder='请选择'
            :value.sync="model.f_fillgas_type"
            :options='paymenttype'
            close-on-select clear-button>
          </v-select>
          </div>
          <!-- <label for="f_fillgas_date" class="col-sm-2 control-label">补气日期:</label>
          <div class="col-sm-2">
            <datepicker  placeholder="补气日期"
              v-model="model.f_fillgas_date"
              v-validator:f_fillgas_date='{required: true }'
              :value.sync="model.f_fillgas_date"
              :format="'yyyy-MM-dd HH:mm:ss'"
              width="100%">
            </datepicker>
          </div> -->
        </div>
        <!-- <div class="row" style="margin-top:10px;">
          <label for="f_card_id" class=" col-sm-2 control-label" >卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
          <span class="col-sm-2 form-control-static">{{model.f_card_id}}</span>
        </div> -->
        <div class="row" style="margin-top:10px;">
          <label for="f_reason" class=" col-sm-2 control-label" >补气原因:</label>
          <div class="col-sm-8">
            <textarea class="form-control" rows="3" v-model="model.f_reason" placeholder="补气原因"></textarea>
          </div>
        </div>
      </form>
      <div style="text-align:right;height:auto;margin-top:80px;margin-right:50px;">
        <button class="btn btn-success" @click="confirm()" >确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
        <button class="btn btn-default" @click="clean()" style="width:80px;margin-left:20px;">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
      </div>
    </validator>
  </div>
</template>
<script>
import AppData from '../../../../../stores/AppData'
export default {
  title: '换表补气',
  data () {
    return {
      model: {
        f_fillgas_type: ['换表补气'],
        f_fillgas: '',
        f_lastremain_fillgas: '',
        f_theremain_fillgas: '',
        f_reason: '',
        f_card_id: ''
      }
    }
  },
  props: ['row'],
  ready () {
    this.model.f_card_id = this.row.f_card_id
  },
  watch: {
    'row' (val) {
      this.model.f_card_id = val.f_card_id
      this.model.f_fillgas = val.f_remanent_gas
      this.model.f_lastremain_fillgas = val.f_remanent_gas
      this.model.f_theremain_fillgas = this.model.f_lastremain_fillgas - this.model.f_fillgas
    }
  },
  methods: {
    confirm () {
      this.model.f_theremain_fillgas = this.theremain_fillgas
      this.$ChangeMeterService.AddGasWriteCard(this.model, this.row)
      .then(
        (res) => this.$dispatch('success', '换表补气', this.row, res)
      ).catch(
        (error) => this.$dispatch('error', '换表补气', this.row, error)
      )
    },
    clean () {
      this.$dispatch('clean', this.row)
    }
  },
  computed: {
    paymenttype () {
      return AppData.getParam('补气类型')
    },
    theremain_fillgas () {
      if (this.model.f_lastremain_fillgas - this.model.f_fillgas > 0) {
        return this.model.f_lastremain_fillgas - this.model.f_fillgas
      } else {
        return 0
      }
    }
  }
}
</script>

<style>
</style>
